<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../utils/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"> -->
    <link rel="stylesheet" href="../css/ProductList.css">
    <script src="../JS/jquery-3.4.1.min.js"></script>
    <script src="../utils/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
 
    <script type="text/javascript">
        $(function () {
            var tableColumns = [
                {field: 'name', title: '名称', sortable: true},
                {field: 'number', title: '编号', sortable: true},
                {field: 'classes', title: '类型', sortable: true},
                {field: 'standard', title: '规格', sortable: true},
                {field: 'managestaff', title: '专管员', sortable: true},
                {field: 'remark', title: '备注', sortable: true}
            ];
            var data1=[
                {name:"aaaa1",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa2",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa3",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa4",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa5",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa6",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa7",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
 
            ];
            $('#tableL01').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格
 
            $('#tableL01').bootstrapTable({//表格初始化
                columns: tableColumns,  //表头
                data:data1, //通过ajax返回的数据
                width:300,
                height:268,
                method: 'get',
                pageSize: 3,
                pageNumber: 1,
                pageList: [],
                cache: false,
                striped: true,
                pagination: true,
                sidePagination: 'client',
                search: false,
                showRefresh: false,
                showExport: false,
                showFooter: true,
                // exportTypes: ['csv', 'txt', 'xml'],
                clickToSelect: true,
            });
 
        });
    </script>
</head>
<body>
 
<div class="panel panel-default">
    <div class="panel-body table-responsive">
        　　　　　　　　　
        <div class="query-div" id="toolbar">
            <form class="form-inline" role="form" id="query_form">
                <div class="form-group query-form-group">
                    <label for="status">状态</label>
                    <select class="form-control" id="with_appr_status"
                    <option value="">全部</option>
                    <option value="S1">待处理</option>
                    <option value="S2">已处理</option>
                    </select>
                </div>
                <div class="form-group query-form-group">
                    <button type="button" class="btn btn-default" id="with_query">查询</button>
                </div>
            </form>
        </div>
 
        <table class="table table-striped table-bordered table-hover" id="tableL01">
 
        </table>
    </div>
</div>
 
</body>
</html>